<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../public/font/iconfont.css">
  <link rel="stylesheet" href="../css/fillOrder.css">

  <link rel="shortcut icon" href="../public/favicon.ico">

</head>

<body>
  <div class="wrap">
    <div class="header">

      <!-- 顶部导航 -->
      <div class="topnav">
        <!-- 版心盒子 -->
        <div class="topnav_content">
          <!-- 放置顶部导航的盒子 -->
          <div class="topnav_right">
            <ul>
              <li>
                <a href="javascript:;">请先登录</a>
              </li>
              <li>
                <a href="javascript:;">免费注册</a>
              </li>
              <li>
                <a href="javascript:;">我的订单</a>
              </li>
              <li>
                <a href="javascript:;">会员中心</a>
              </li>
              <li>
                <a href="javascript:;">帮助中心</a>
              </li>
              <li>
                <a href="javascript:;">关于我们</a>
              </li>
              <li>
                <a href="javascript:;">
                  <span class="toutiao">&#xe60a; </span>手机版</a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 顶部导航结束 -->
        <!-- 导航栏 -->
      </div>
      <!-- 顶部导航结束 -->
      <!-- 导航栏 -->
      <div class="block-nav">
        <div class="nav w">
          <!-- 版心盒子 -->
          <div class="nav-content w">
            <!-- 放置logo的盒子 -->
            <div class="nav-left">
              <h1>
                <a href="">logo</a>
              </h1>
            </div>
            <!-- 中间导航部分 -->
            <div class="nav-center">
              <ul>
                <li>
                  <a href="javascript:;">首页</a>
                </li>
                <li>
                  <a href="javascript:;">居家</a>
                </li>
                <li>
                  <a href="javascript:;">美食</a>
                </li>
                <li>
                  <a href="javascript:;">服饰</a>
                </li>
                <li>
                  <a href="javascript:;">母婴</a>
                </li>
                <li>
                  <a href="javascript:;">个护</a>
                </li>
                <li>
                  <a href="javascript:;">严选</a>
                </li>
                <li>
                  <a href="javascript:;">数码</a>
                </li>
                <li>
                  <a href="javascript:;">运动</a>
                </li>
                <li>
                  <a href="javascript:;">杂项</a>
                </li>
              </ul>
            </div>
            <!-- 右边导航部分 -->
            <div class="nav-right">
              <span class="toutiao">&#xe63b; </span>
              <input type="text" placeholder="搜一搜" />
              <div id="none-shop">
                <span class="toutiao" id="gouwuche">&#xe649; </span>
                <i id="count">0</i>
                <!-- 隐藏购物车盒子 -->
                <div class="none-shop active">
                  <div class="tri">
                    <div class="trangle"></div>
                    <div class="trangle1"></div>
                  </div>
                  <div class="top">
                    <ul>
                      <!--  <li>
                          <div class="pho">
                            <img src="./public/produceImgs/D1.jpg" alt="" />
                          </div>
                          <div class="text">
                            <span id="title">麦瑞克家用轻音智能多功能彩屏跑步机S450</span
                            >
                            <span id="dec">规格：多功能 款式：蓝屏</span>
                          </div>
                          <div id="count-right">
                            <span id="price">￥2303.00</span>
                            <span>x1</span>
                          </div>
                          <div id="close">
                            <span class="toutiao" id="toutiao-close">&#xe604;</span>
                          </div>
                        </li> -->
                    </ul>
                  </div>
                  <div id="bottom">
                    <div class="total">
                      <span class="title">共1件商品</span>
                      <span class="price">￥2303.00</span>
                    </div>
                    <div class="input">
                      <button id="input">去购物车结算</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 隐藏导航栏 -->
      <div class="none-nav active">
        <div class="nav w">
          <!-- 版心盒子 -->
          <div class="nav-content w">
            <!-- 放置logo的盒子 -->
            <div class="nav-left">
              <h1>
                <a href="">logo</a>
              </h1>
            </div>
            <!-- 中间导航部分 -->
            <div class="nav-center">
              <ul>
                <li>
                  <a href="javascript:;">首页</a>
                </li>
                <li>
                  <a href="javascript:;">居家</a>
                </li>
                <li>
                  <a href="javascript:;">美食</a>
                </li>
                <li>
                  <a href="javascript:;">服饰</a>
                </li>
                <li>
                  <a href="javascript:;">母婴</a>
                </li>
                <li>
                  <a href="javascript:;">个护</a>
                </li>
                <li>
                  <a href="javascript:;">严选</a>
                </li>
                <li>
                  <a href="javascript:;">数码</a>
                </li>
                <li>
                  <a href="javascript:;">运动</a>
                </li>
                <li>
                  <a href="javascript:;">杂项</a>
                </li>
              </ul>
            </div>
            <!-- 右边导航部分 -->
            <div class="none-right">
              <!-- <span class="toutiao">&#xe63b; </span>
                <input type="text" placeholder="搜一搜" />
                <span class="toutiao" id="gouwuche">&#xe649; </span>
                <i id="count"></i> -->
              <ul>
                <li>
                  <a href="javascript:;" id="brand" class="brand">品牌</a>
                </li>
                <li>
                  <a href="javascript:;" id="theme" class="theme">专题</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="ordcon">
      <div class="ordcon_header">
        <span>首页 <i class="icon toutiao icon-xiangyoujiantou"></i></span>
        <span class="gwc">购物车<i class="icon toutiao icon-xiangyoujiantou"></i></span>
        <span class="odd">填写订单</span>
      </div>
      <div class="address">
        <h3 class="add_title">
          收货地址
        </h3>
        <div class="add_box">
          <div class="add_item">
            <div class="add_mes">
              <ul class="add_list">
                <!-- <li><span>收&nbsp货&nbsp人:</span> 苏苏二</li>
                <li><span>联系方式:</span>136****6666</li>
                <li><span>收货地址:</span>北京市 北京市 东城区</li> -->
              </ul>
            </div>
            <div class="add_btn">
              <button class="btn1">切换地址</button>
              <button class="btn2">添加地址</button>
            </div>
          </div>
        </div>

      </div>
      <h3 class="box-title">商品信息</h3>
      <div class="tablebox">
        <table class="goods">
          <thead>
            <tr>
              <th width="520">商品信息</th>
              <th width="170">单价</th>
              <th width="170">数量</th>
              <th width="170">小计</th>
              <th width="170">实付</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr>
              <td>
                <a href="#" class="info">
                  <img src="../public/produceImgs/shop_1.jpg" alt="">
                  <div class="right">
                    <p>休闲潮流运动男士胸包</p>
                    <p>颜色:圣代蓝</p>
                  </div>
                </a>
              </td>
              <td>¥166.00</td>
              <td>1</td>
              <td>¥166.00</td>
              <td>¥166.00</td>
            </tr> -->


          </tbody>
        </table>


      </div>
      <h3 class="box-title">配送时间</h3>
      <div class="time">
        <a class="my-btn active" href="javascript:;">不限送货时间：周一至周日</a>
        <a class="my-btn" href="javascript:;">工作日送货：周一至周五</a>
        <a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a>
      </div>
      <h3 class="box-title">支付方式</h3>
      <div class="pay">
        <a class="my-btn active" href="javascript:;">在线支付</a>
        <a class="my-btn" href="javascript:;">货到付款</a>
        <span style="color:#999;">货到付款需付5元手续费</span>
      </div>
      <h3 class="box-title">金额明细</h3>
      <div class="detail">
        <div class="de_total">
          <dl>
            <dt>商品件数：</dt>
            <dd>7件</dd>
          </dl>
          <dl>
            <dt>商品总价：</dt>
            <dd>¥875</dd>
          </dl>
          <dl>
            <dt>运<i></i>费：</dt>
            <dd>¥4</dd>
          </dl>
          <dl>
            <dt>应付总额：</dt>
            <dd class="price">¥879</dd>
          </dl>
        </div>

      </div>
      <div class="submit">
        <button class="send">提交订单</button>
      </div>
    </div>
    <!-- 尾部开始 -->
    <div class="footer">
      <div class="footerContent">
        <ul class="footerBox">
          <li>
            <p>客户服务</p>
            <div class="tubiao">
              <div class="iconBox">
                <i class="iconfont">&#xe661;</i>
                <p>在线客服</p>
              </div>
              <div class="iconBox">
                <i class="iconfont">&#xe600;</i>
                <p>问题反馈</p>
              </div>
            </div>
          </li>

          <li>
            <p>关注我们</p>
            <div class="tubiao">
              <div class="iconBox">
                <i class="iconfont">&#xe65c;</i>
                <p>公众号</p>
              </div>
              <div class="iconBox">
                <i class="iconfont">&#xe65d;</i>
                <p>微博</p>
              </div>
            </div>
          </li>

          <li class="download">
            <p>下载APP</p>
            <div class="title">
              <div>
                <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt="" />
              </div>
              <div>
                <span>扫描二维码</span>
                <span>立马下载APP</span>
                <a href="#">下载页面</a>
              </div>
            </div>
          </li>

          <li class="fuwu">
            <p>服务热线</p>
            <div>
              <span> 400-0000-000 </span>
              <span>周一至周日 8:00-18:00</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 尾部结束 -->
    <!-- 底部开始 -->
    <div class="bottom">
      <div class="content">
        <div class="character">
          <a href="javascript:;">
            <i class="iconfont">&#xe6e5;</i>
            <span>价格亲民</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont">&#xe60e;</i>
            <span>物流快捷</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont">&#xe665;</i>
            <span>品质新鲜</span>
          </a>
        </div>
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight © 小兔鲜儿</p>
        </div>
      </div>
    </div>
    <!-- 底部结束 -->

  </div>



  <!-- <div class="dialog">
    <div class="dia_wrapper">
      <div class="dia_header">
        <h3>切换收货地址</h3>
        <a href="#" class="icon toutiao icon-guanbi"></a>
      </div>
      <div class="dia_body">
        <div class="adressWrapper">
          <div class="address_item">
            <ul>
              <li><span>收&nbsp货&nbsp人:</span>苏苏一</li>
              <li><span>联系方式:</span>137****7777</li>
              <li><span>收货地址:</span>北京市 北京市 东城区东城加油站</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="dia_footer">
        <button class="cancle gray">取消</button>
        <button class="confirm primary">确定</button>
      </div>
    </div>

  </div> -->
  <script src="../js/promiseAjax.js"></script>
  <script src="../js/addressData.js"></script>
  <script src="../js/fillOrder.js">
  </script>
  <script src="../js/common.js"></script>
  <script src="../js/topRegisters.js"></script>
  <script src="../js/goto.js"></script>
</body>

</html>